<template>
    <div>
        <div class="swiper-container" v-if="list.length">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item, index) in list" :key="index">
                    <img class="swiperimg" :src="item.logo" alt="">
                </div>
            </div>
            <div class="swiper-pagination"></div><!--分页器。如果放置在swiper外面，需要自定义样式。-->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </div>
</template>
<script>

import Swiper from 'swiper'
export default {
    name: 'HelloWorld',
    components: {
    },
    data() {
        return {
            list: []
        }
    },
    props: {
    },
    created() {

    },
    methods: {
        lunbo(list) {
            this.list = list
            // 顶部轮播图
            setTimeout(() => {
                new Swiper('.swiper-container', {
                    loop: true,
                    autoplay: {
                        delay: 5000,
                        disableOnInteraction: false,
                        // stopOnLastSlide: false,
                        // disableOnInteraction: false,
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
                    observer: true,
                    observeParents: true,
                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true, // 分页器可以点击
                    },
                })
            }, 500);
        },
    },
    mounted() {


    }
}
</script>
<style lang="scss" scoped>
.swiperimg {
    width: 100%;
}

.swiper-container {
    max-width: 1920px;
    margin: 0 auto;
}
</style>